import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Modal, Checkbox, InputNumber, Switch, message, } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import {
  fetchMembershipCards,
  editMembershipCards,
} from '@/services/distribution/setting'
import { formItemLayout } from '@/utils/utils'

const hasSearchBtn = JSON.parse(localStorage.getItem('hasSearchBtn'))
const col = [
  {
    title: '序号',
    dataIndex: 'sort',
    key: 'sort',
    render: (t, r, i) => <>{i + 1}</>
  },
  {
    title: '门店名称',
    dataIndex: 'storeName',
    key: 'storeName',
  },
  {
    title: '会员提成比例',
    dataIndex: 'userCommissionValue',
    key: 'userCommissionValue',
    render: t => <>{t ? `${t * 100}%` : null}</>
  },
  {
    title: '员工提成比例',
    dataIndex: 'cardCommissionValue',
    key: 'cardCommissionValue',
    render: t => <>{t ? `${t * 100}%` : null}</>
  },
]
const MembershipCard = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [data, setData] = useState([])
  const [record, setRecord] = useState([])
  const [visible, setVisible] = useState(false)
  const [isCheck, setCheck] = useState(false)

  useEffect(() => {
    init()
  }, [])

  const init = async (params = {
    pageNo: 1,
    pageSize: 10
  }) => {
    const res = await fetchMembershipCards(params)
    res.code == 0 ? setData(res.data) : message.warning(res.msg)
  }

  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)

    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return(
      <Col span={8}>
        <Form.Item label={`名称`}>
          {getFieldDecorator(`id`, {})
            (<Input />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    if (record.length == 0 && type != 1) return message.warning('请选择一条数据')
    switch (type) {
      case 3: //edit
        return setVisible(!visible)
            
      default:
        break;
    }
  }

  const editData = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      editMembershipCards({
        employeeCashRegisterSetting: {
          ...record[0],
          ...values,
          cardStatus: values.cardStatus ? '1' : '0',
        }
      }).then(res => {
        if (res.code == 0) {
          setVisible(!visible)
          init()
        } else {
          message.warning(res.msg)   
        }
      })
    })
  }
  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  console.log(11, isCheck)
  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table 
        columns={col}
        dataSource={data}
        rowSelection={rowSelection}
        rowKey={r => r.id}
      />
      <Modal
        title='编辑'
        visible={visible}
        onOk={editData}
        onCancel={() => setVisible(!visible)}
      >
        <Form {...formItemLayout}>
          <Form.Item label="开关">
            {getFieldDecorator('cardStatus', {
              initialValue: record[0] && record[0].cardStatus == '1' ? true : false,
              valuePropName: 'checked',
            })(<Switch onChange={checked => setCheck(checked)} />)}
          </Form.Item>
          {(record[0] && record[0].cardStatus == '1' || isCheck) && <Form.Item label="员工提成比例">
            {getFieldDecorator('userCommissionValue', {
              initialValue: record[0] && record[0].userCommissionValue,
            })(<Input />)}
          </Form.Item>}
          {(record[0] && record[0].cardStatus == '1' || isCheck) && <Form.Item label="会员提成比例">
            {getFieldDecorator('cardCommissionValue', {
              initialValue: record[0] && record[0].cardCommissionValue,
            })(<Input />)}
          </Form.Item>}
        </Form>
      </Modal>
    </PageHeaderWrapper>
    )
}

export default Form.create()(MembershipCard)
